<!doctype html>  
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<html lang="en-us"><!--<![endif]-->
<head>
	<meta charset="utf-8">
	
	<title>MWS Admin - Full Featured Admin Template</title>
	
	<meta name="description" content="Hi there, thank you for purchasing this theme. If you have any questions that are beyond the scope of this documentation, please feel free to contact me via the comment section or email me at &#109;&#97;&#105;&#109;&#97;&#105;&#114;&#101;&#108;&#64;&#121;&#97;&#104;&#111;&#111;&#46;&#99;&#111;&#109; Thanks.">
	<meta name="author" content="maimairel">
	<meta name="copyright" content="maimairel">
	<meta name="generator" content="Documenter v1.6 http://rxa.li/documenter">
	<meta name="date" content="2012-05-22T00:00:00+02:00">
	
	<link rel="stylesheet" href="css/documenter_style.css" media="all">
	<link rel="stylesheet" href="css/custom.css" media="screen">

	
	<script src="js/jquery.1.6.4.js"></script>
	
	<script src="js/jquery.scrollTo-1.4.2-min.js"></script>
	<script src="js/jquery.easing.js"></script>
	
    <!-- Syntax Highlighter -->
    <script type="text/javascript" src="js/prettify/prettify.js"></script>
    <link rel="stylesheet" href="js/prettify/themes/theme-balupton.css" media="screen" />

	<script>document.createElement('section');var duration=500,easing='swing';</script>
	<script src="js/script.js"></script>
	
	<style>
		html{background-color:#EEEEEE;color:#383838;background-image:url(assets/images/image_2.png);background-repeat:repeat;background-attachment:scroll;}
		::-moz-selection{background:#333636;color:#C5D52B;}
		::selection{background:#333636;color:#C5D52B;}
		#documenter_sidebar #documenter_logo{background-image:url(assets/images/image_9.png);}
		a{color:#008C9E;}
		hr{border-top:1px solid #D4D4D4;border-bottom:1px solid #FFFFFF;}
		#documenter_sidebar, #documenter_sidebar ol a{background-color:#343838;color:#FFFFFF;background-image:url(assets/images/image_11.png);background-repeat:repeat;}
		#documenter_sidebar ol a{-webkit-text-shadow:1px 1px 0px #494F4F;-moz-text-shadow:1px 1px 0px #494F4F;text-shadow:1px 1px 0px #494F4F;}
		#documenter_sidebar ol{border-top:1px solid #212424;}
		#documenter_sidebar ol a{border-top:1px solid #494F4F;border-bottom:1px solid #212424;color:#FFFFFF;}
		#documenter_sidebar ol a:hover{background:#333636;color:#C5D52B;border-top:1px solid #333636;}
		#documenter_sidebar ol a.current{background:#333636;color:#C5D52B;border-top:1px solid #333636;}
		#documenter_copyright{display:block !important;visibility:visible !important;}
	</style>
	
</head>
<body>
	<div id="documenter_sidebar">
		<a href="#documenter_cover" id="documenter_logo"></a>
		<ol id="documenter_nav">
			<li><a class="current" href="#documenter_cover">Start</a></li>
			<li><a href="#complete_feature_list">Complete Feature List</a></li>
			<li><a href="#html_structure">HTML Structure</a></li>
			<li><a href="#css_files">CSS Files</a></li>
			<li><a href="#javascript_files">JavaScript Files</a></li>
			<li><a href="#using_panels">Using Panels</a></li>
			<li><a href="#styling_forms">Styling Forms</a></li>
			<li><a href="#custom_plugins">Custom Plugins</a></li>
			<li><a href="#using_plugins">Using Plugins</a></li>
			<li><a href="#changelog">Changelog</a></li>
			<li><a href="#credits">Credits</a></li>

		</ol>
		<div id="documenter_copyright">Copyright maimairel 2012<br>
		made with the <a href="http://rxa.li/documenter">Documenter v1.6</a> 
		</div>
	</div>
	<div id="documenter_content">
	<section id="documenter_cover"><h1>MWS Admin - Full Featured Admin Template</h1><hr><ul><li>Created: 01/27/2012</li><li>latest Update: 12/08/2012</li><li>By: maimairel</li><li>Email: <a href="mailto:&#109;&#97;&#105;&#109;&#97;&#105;&#114;&#101;&#108;&#64;&#121;&#97;&#104;&#111;&#111;&#46;&#99;&#111;&#109;">&#109;&#97;&#105;&#109;&#97;&#105;&#114;&#101;&#108;&#64;&#121;&#97;&#104;&#111;&#111;&#46;&#99;&#111;&#109;</a></li></ul><p>Hi there, thank you for purchasing this theme. If you have any questions that are beyond the scope of this documentation, please feel free to contact me via the comment section or email me at &#109;&#97;&#105;&#109;&#97;&#105;&#114;&#101;&#108;&#64;&#121;&#97;&#104;&#111;&#111;&#46;&#99;&#111;&#109; Thanks.</p></section><section id="introduction">
</section>
<section id="complete_feature_list">
	<h3>Complete Feature List</h3><hr class="notop">
<ul>
	<li>Fluid Layout</li>
	<li>Responsive Design (Looks great on desktops, tablets and phones)</li>
	<li>Two Columns</li>
	<li>MWS Themer, a feature to customize this template&#39;s look and feel to match your site</li>
	<li>Bootstrap Components Integrated
		<ul>
			<li>Buttons</li>
			<li>Button groups</li>
			<li>Tooltips</li>
			<li>Popovers</li>
			<li>Dropdowns</li>
			<li>Collapse</li>
			<li>Labels and Badges</li>
		</ul>
	</li>
	<li>
		Tons of Font and Sprite Icons
		<ul>
			<li>jQuery-UI Standard Icons</li>
			<li>382 Font Icons made with IcoMoon app</li>
			<li>512 Led Icons</li>
			<li>2400 Fatcow Icons</li>
		</ul>
	</li>
	<li>
		14 Plugins Integrated and Styled
		<ul>
			<li>Colorpicker</li>
			<li>File Manager (elFinder)</li>
			<li>WYSIWYG Editor (CLEditor)</li>
			<li>Flot Charts</li>
			<li>Full Calendar</li>
			<li>Growl Notifications</li>
			<li>Image Cropper (imgareaselect)</li>
			<li>File Uploader (plupload)</li>
			<li>Data Tables</li>
			<li>Validation plugin (jQuery validate)</li>
			<li>Select2 plugin</li>
			<li>jQuery prettyPhoto plugin</li>
			<li>jQuery iButton plugin</li>
		</ul>
	</li>
	<li>
		3 Custom Build Plugins
		<ul>
			<li>Wizard, a plugin for converting a set of form sections into a responsive wizard</li>
			<li>PickList, a plugin for converting select input fields to pick list input</li>
			<li>FileInput, a plugin for easily styling file input fields without needing any additional css</li>
		</ul>
	</li>
	<li>
		The brand new jQuery-UI 1.9.0 integration
		<ul>
			<li>Autocomplete</li>
			<li>Datepicker</li>
			<li>Accordion</li>
			<li>Tabs</li>
			<li>Sliders</li>
			<li>Progress Bar</li>
			<li>Dialog</li>
			<li>Buttonsets</li>
			<li>Spinner</li>
		</ul>
	</li>
	<li>Message and Notification dropdown list</li>
	<li>Fluid 8 grid layout</li>
	<li>
		Panel Styles
		<ul>
			<li>Panel content with padding</li>
			<li>Panel content without padding</li>
			<li>Collapsible Panels</li>
			<li>Panel with Toolbar</li>
		</ul>
	</li>
	<li>Fancy statistic widget with icon</li>
	<li>Summary List</li>
	<li>
		Form layouts and sizes
		<ul>
			<li>Inline form layout</li>
			<li>Block form layout</li>
			<li>Columned form layout</li>
			<li>Three different input sizes (small, default, large)</li>
			<li>Error messages
				<ul>
					<li>Below the form input</li>
					<li>As a summary on top of the form</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
</section>

<section id="html_structure">
	<h3>HTML Structure</h3><hr class="notop">
<p>	This template has three sections, the header, the sidebar, and the main container.&nbsp;</p>
<div>
	<strong>Header Contains:</strong></div>
<ul>	<li>		Logo</li>
	<li>		Notifications and Messages</li>
	<li>		User Functions (Logout, Change Password, Profile)</li>
</ul>
<div>
	<strong>Sidebar Contains:</strong></div>
<ul>	<li>		Search Box</li>
	<li>		Main Navigation</li>
	<li>		Container contains all the necessary codes</li>
</ul>
<p>	The header structure is as follows:</p>
<pre class="prettyprint linenums">
&lt;div id=&quot;mws-header&quot; class=&quot;clearfix&quot;&gt;
	&lt;!-- Logo Container --&gt;
	&lt;div id=&quot;mws-logo-container&quot;&gt;
		&lt;!-- Logo Wrapper, images put within this wrapper will always be vertically centered --&gt;
		&lt;div id=&quot;mws-logo-wrap&quot;&gt;
			&lt;img src=&quot;images/mws-logo.png&quot; alt=&quot;mws admin&quot; /&gt;
		&lt;/div&gt;
	&lt;/div&gt;

	&lt;!-- User Tools (notifications, logout, profile, change password) --&gt;
	&lt;div id=&quot;mws-user-tools&quot; class=&quot;clearfix&quot;&gt;

		&lt;!-- Notifications --&gt;
		&lt;div id=&quot;mws-user-notif&quot; class=&quot;mws-dropdown-menu&quot;&gt;
			&lt;a href=&quot;#&quot; data-toggle=&quot;dropdown&quot; class=&quot;mws-dropdown-trigger&quot;&gt;&lt;i class=&quot;icon-exclamation-sign&quot;&gt;&lt;/i&gt;&lt;/a&gt;

			&lt;!-- Unread notification count --&gt;
			&lt;span class=&quot;mws-dropdown-notif&quot;&gt;35&lt;/span&gt;

			&lt;!-- Notifications dropdown --&gt;
			&lt;div class=&quot;mws-dropdown-box&quot;&gt;
				&lt;div class=&quot;mws-dropdown-content&quot;&gt;
					&lt;ul class=&quot;mws-notifications&quot;&gt;
						&lt;!-- Here goes all the messages --&gt;
					&lt;/ul&gt;
					&lt;div class=&quot;mws-dropdown-viewall&quot;&gt;
						&lt;a href=&quot;#&quot;&gt;View All Notifications&lt;/a&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;!-- Messages --&gt;
		&lt;div id=&quot;mws-user-message&quot; class=&quot;mws-dropdown-menu&quot;&gt;
			&lt;a href=&quot;#&quot; data-toggle=&quot;dropdown&quot; class=&quot;mws-dropdown-trigger&quot;&gt;&lt;i class=&quot;icon-envelope&quot;&gt;&lt;/i&gt;&lt;/a&gt;

			&lt;!-- Unred messages count --&gt;
			&lt;span class=&quot;mws-dropdown-notif&quot;&gt;35&lt;/span&gt;

			&lt;!-- Messages dropdown --&gt;
			&lt;div class=&quot;mws-dropdown-box&quot;&gt;
				&lt;div class=&quot;mws-dropdown-content&quot;&gt;
					&lt;ul class=&quot;mws-messages&quot;&gt;
						&lt;!-- Here goes all the messages --&gt;
					&lt;/ul&gt;
					&lt;div class=&quot;mws-dropdown-viewall&quot;&gt;
						&lt;a href=&quot;#&quot;&gt;View All Messages&lt;/a&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;!-- User Information and functions section --&gt;
		&lt;div id=&quot;mws-user-info&quot; class=&quot;mws-inset&quot;&gt;

			&lt;!-- User Photo --&gt;
			&lt;div id=&quot;mws-user-photo&quot;&gt;
				&lt;img src=&quot;example/profile.jpg&quot; alt=&quot;User Photo&quot; /&gt;
			&lt;/div&gt;

			&lt;!-- Username and Functions --&gt;
			&lt;div id=&quot;mws-user-functions&quot;&gt;
				&lt;div id=&quot;mws-username&quot;&gt;Hello, John Doe&lt;/div&gt;
				&lt;ul&gt;
					&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Change Password&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Logout&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>	The main structrure is as follows:</p>
<pre class="prettyprint linenums">
&lt;!-- Start Main Wrapper --&gt;
&lt;div id=&quot;mws-wrapper&quot;&gt;
	&lt;!-- Necessary markup, do not remove --&gt;
	&lt;div id=&quot;mws-sidebar-stitch&quot;&gt;&lt;/div&gt;

	&lt;!-- Sidebar Wrapper --&gt;
	&lt;div id=&quot;mws-sidebar&quot;&gt;

		&lt;!-- Hidden Nav Collapse Button --&gt;
		&lt;div id=&quot;mws-nav-collapse&quot;&gt;
			&lt;span&gt;&lt;/span&gt;
			&lt;span&gt;&lt;/span&gt;
			&lt;span&gt;&lt;/span&gt;
		&lt;/div&gt;

		&lt;!-- Searchbox --&gt;
		&lt;div id=&quot;mws-searchbox&quot; class=&quot;mws-inset&quot;&gt;
			&lt;form action=&quot;typography.html&quot;&gt;
				&lt;input type=&quot;text&quot; class=&quot;mws-search-input&quot; placeholder=&quot;Search...&quot; /&gt;
				&lt;button type=&quot;submit&quot; class=&quot;mws-search-submit&quot;&gt;&lt;i class=&quot;icon-search&quot;&gt;&lt;/i&gt;&lt;/button&gt;
			&lt;/form&gt;
		&lt;/div&gt;

		&lt;!-- Main Navigation --&gt;
		&lt;div id=&quot;mws-navigation&quot;&gt;
			&lt;ul&gt;
				&lt;!-- Here goes the navigation --&gt;
			&lt;/ul&gt;
		&lt;/div&gt;
	&lt;/div&gt;

	&lt;!-- Main Container Start --&gt;
	&lt;div id=&quot;mws-container&quot; class=&quot;clearfix&quot;&gt;
		&lt;!-- Inner Container Start --&gt;
		&lt;div class=&quot;container&quot;&gt;
		&lt;/div&gt;
		&lt;!-- Inner Container End --&gt;

		&lt;!-- Footer --&gt;
		&lt;div id=&quot;mws-footer&quot;&gt;
			Copyright Your Website 2012. All Rights Reserved.
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;!-- Main Container End --&gt;

&lt;/div&gt;
</pre>
<p>&nbsp;	</p>
</section>
<section id="css_files">
	<h3>CSS Files</h3><hr class="notop">
	<p>This template consists of <strong>Bootstrap stylesheet, base stylesheet, main stylesheet, font stylesheet, icon stylesheet, jquery-ui stylesheet</strong> and <strong>plugin stylesheet</strong>.</p>

	<h4>Bootstrap Stylesheet</h4>
	<p>Bootstrap stylesheet is the foundation stylesheet which is utilized to reset the browser inconsistencies as well as styling the bootstrap components. This stylesheet is required to be included in your page.</p>

	<h4>Main Stylesheets</h4>
	<p>The main stylesheet is separated into several files, which do the styling for the main layout and every other custom components of this template.</p>

	<p>This is a list of the main stylesheets which are located in <strong>css/core</strong></p>
	<ul>
		<li>button.css (contains overrides for the Bootstrap button styles)</li>
		<li>core.css (contains all the core styles navigation, sidebar, etc.)</li>
		<li>error.css (contains error page styles)</li>
		<li>form.css (contains form layout styles)</li>
		<li>gallery.css (contains gallery styles)</li>
		<li>login.css (contains login screen styles)</li>
		<li>misc.css (contains pagination, toolbar, wizard and summary styles)</li>
		<li>panels.css (contains panel styles)</li>
		<li>responsive.css (contains css media queries)</li>
		<li>shared.css (contains the fluid grid and shared css styles)</li>
		<li>statistic.css (contains statistics and report styles)</li>
		<li>table.css (contains table styles)</li>
		<!-- <li>themer.css (contains Themer style, you may remove this)</li> -->
		<li>tweaks.css (contains several bootstrap component tweaks)</li>
	</ul>

	<p>It&#39;s recommended to include them all in all your pages, or just merge them into one file. Separation is meant to ease understanding and use of each file.</p>

	<p>To ease inclusion of these files, just include <strong>css/mws.style.css</strong>, which already import all these css files</p>
	<pre class="prettyprint linenums">
@import url(&quot;shared.css&quot;);
@import url(&quot;core.css&quot;);
@import url(&quot;panels.css&quot;);
@import url(&quot;table.css&quot;);
@import url(&quot;gallery.css&quot;);
@import url(&quot;button.css&quot;);
@import url(&quot;statistic.css&quot;);
@import url(&quot;form.css&quot;);
@import url(&quot;error.css&quot;);
@import url(&quot;tweaks.css&quot;);
@import url(&quot;plugins.css&quot;);
@import url(&quot;responsive.css&quot;);</pre>

	<h4>Font Stylesheets</h4>
	<p>This template includes PTSans, a font from <a href="http://www.fontsquirrel.com/">Font Squirrel</a>&nbsp;which is used in the whole template.</p>

	<h4>Icon Stylesheets</h4>
	<p>This template includes three icon sets, web font and sprite icons</p>
	<p>Each icon has its own class defined in each stylesheet in <strong>css/icons</strong></p>

	<h4>jQuery-UI Stylesheets</h4><p>
	jQuery-UI stylesheets are located in <strong>jui/css</strong></p>
	<p>Just include <strong>jui/css/jquery.ui.all.css</strong>&nbsp;to use the jquery-ui styles.</p>

	<h4>Plugin Stylesheets</h4>
	<p>Plugin stylesheets are located in each plugin folder in <strong>plugins/</strong>, more detailed explanation can be found in the plugins section.</p>

</section>
<section id="javascript_files">
	<h3>JavaScript Files</h3><hr class="notop">
<p>
	This template has four build in javascript files:</p>
<ul>
	<li>
		js/libs/jquery-1.8.2.min.js (required javascript framework, jQuery)</li>
	<li>
		js/core/mws.js (the core , required javascript file to get the template working right)</li>
	<li>
		js/core/themer.js (the javascript file for this template&#39;s color chooser)</li>
</ul>
</section>
<section id="using_panels">
	<h3>Using Panels</h3><hr class="notop">
<p>
	This template&#39;s content area is divided into panels.</p>
<p>
	A panel can be collapsible and&nbsp;is used to display widgets, tables, forms, text, charts etc.</p>
<p>
	A panel is divided into grids using the fluid grid system (an extension of <a href="http://www.960.gs">960gs</a>).</p>
<p>
	Here is the general panel structure:</p>
<pre class="prettyprint linenums">
&lt;!-- Panel Wrapper --&gt;
&lt;div class=&quot;mws-panel grid_4&quot;&gt;
    &lt;!-- Panel Header --&gt;
    &lt;div class=&quot;mws-panel-header&quot;&gt;
        &lt;!-- Panel Title --&gt;
        &lt;span&gt;Panel Header&lt;/span&gt;
    &lt;/div&gt;

    &lt;!-- Panel Body --&gt;
    &lt;div class=&quot;mws-panel-body&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
<h4>
	<strong>Structure Explanation</strong></h4>
<p>
	<strong>Panel Wrapper</strong></p>
<p>
	Panel wrapper has a class attribute<strong> &#39;mws-panel&nbsp;</strong><strong>grid_4&#39;</strong></p>
<p>
	<strong>&#39;grid_4&#39;</strong> means that this panel is panel which fill 4 grids of the 8 available, so it&#39;s 50% of the container&#39;s width.</p>
<p>
	<strong>Panel Header</strong></p>
<p>
	Panel header has a class attribute &#39;mws-panel-header&#39;, and a panel header will contain the panel title</p>
<p>
	<strong>Panel Title</strong></p>
<p>
	Panel title is the title of the panel. A panel title can have an icon, which can be customized by the class attribute.</p>
<p>
	From the code above, the panel title has the class attribute <strong>&#39;mws-i-24 i-text-styling&#39;</strong>. This class attribute is explained at the icons section.</p>
<p>
	<strong>Panel Body</strong></p>
<p>
	Panel body contains everything. From widgets, tables, toolbars, charts, forms etc.</p>
<h4>
	Making Panels Collapsible</h4>
<p>
	To make a panel collapsible, add the css class<strong> &#39;mws-collapsible&#39;</strong> to the panel wrapper, eg:</p>
<pre class="prettyprint linenums">
&lt;div class=&quot;mws-panel grid_4 mws-collapsible&quot;&gt;&lt;/div&gt;</pre>
</section>
<section id="styling_forms">
	<h3>Styling Forms</h3><hr class="notop">
<p>
	Forms, can be styled in three ways:</p>
<ul>
	<li>
		As an inline form, which has labels on the left side of the input</li>
	<li>
		As a block form, which has labels on top of the input</li>
	<li>
		As a columned form, which has form inputs in columns</li>
</ul>
<p>
	<img alt="" src="assets/images/image_6.jpg"></p>
<p>
	Form HTML Structure:</p>
<pre class="prettyprint linenums">
&lt;form class=&quot;mws-form&quot;&gt;
    &lt;div class=&quot;mws-form-block&quot;&gt;
        &lt;div class=&quot;mws-form-row&quot;&gt;
            &lt;label&gt;&lt;/label&gt;
            &lt;div class=&quot;mws-form-item&quot;&gt;
                &lt;textarea&gt;&lt;/textarea&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mws-button-row&quot;&gt;
    &lt;/div&gt;
&lt;/form&gt;</pre>
<p>
	The markup above, will result in a block form layout. To get inline form layout, change</p>
<pre class="prettyprint linenums">
&lt;div class=&quot;mws-form-block&quot;&gt;&lt;/div&gt;
</pre>
<p>
	to</p>
<pre class="prettyprint linenums">
&lt;div class=&quot;mws-form-inline&quot;&gt;&lt;/div&gt;</pre>
<p>
	By not wrapping the form rows with either <strong>&#39;mws-form-block&#39;</strong> or <strong>&#39;mws-form-inline&#39;</strong>, the form will be a block form, which is the default layout.</p>
<h4>
	Using Columned Form</h4>
<p>
	Columned form divides the area in eight columns, so you can have columns in an eight columns base (col-1-8, col-2-8, col-3-8, col-4-8, col-5-8, col-6-8, col-7-8, col-8-8).</p>
<p>
	To use the columned layout, you have to replace each form row with a column, wrap it in a div with the class &#39;<strong>mws-form-cols</strong>&#39;, so the code would look like this:</p>
<pre class="prettyprint linenums">
&lt;div class=&quot;mws-form-cols clearfix&quot;&gt;
    &lt;div class=&quot;mws-form-col-1-8&quot;&gt;
        &lt;label&gt;Column 1/8&lt;/label&gt;
        &lt;div class=&quot;mws-form-item large&quot;&gt;
            &lt;input type=&quot;text&quot; class=&quot;mws-textinput&quot; /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mws-form-col-1-8&quot;&gt;
        &lt;label&gt;Column 1/8&lt;/label&gt;
        &lt;div class=&quot;mws-form-item large&quot;&gt;
            &lt;input type=&quot;text&quot; class=&quot;mws-textinput&quot; /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mws-form-col-1-8&quot;&gt;
        &lt;label&gt;Column 1/8&lt;/label&gt;
        &lt;div class=&quot;mws-form-item large&quot;&gt;
            &lt;input type=&quot;text&quot; class=&quot;mws-textinput&quot; /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mws-form-col-1-8&quot;&gt;
        &lt;label&gt;Column 1/8&lt;/label&gt;
        &lt;div class=&quot;mws-form-item large&quot;&gt;
            &lt;input type=&quot;text&quot; class=&quot;mws-textinput&quot; /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mws-form-col-1-8&quot;&gt;
        &lt;label&gt;Column 1/8&lt;/label&gt;
        &lt;div class=&quot;mws-form-item large&quot;&gt;
            &lt;input type=&quot;text&quot; class=&quot;mws-textinput&quot; /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mws-form-col-1-8&quot;&gt;
        &lt;label&gt;Column 1/8&lt;/label&gt;
        &lt;div class=&quot;mws-form-item large&quot;&gt;
            &lt;input type=&quot;text&quot; class=&quot;mws-textinput&quot; /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mws-form-col-1-8&quot;&gt;
        &lt;label&gt;Column 1/8&lt;/label&gt;
        &lt;div class=&quot;mws-form-item large&quot;&gt;
            &lt;input type=&quot;text&quot; class=&quot;mws-textinput&quot; /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mws-form-col-1-8&quot;&gt;
        &lt;label&gt;Column 1/8&lt;/label&gt;
        &lt;div class=&quot;mws-form-item large&quot;&gt;
            &lt;input type=&quot;text&quot; class=&quot;mws-textinput&quot; /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
<h4>
	Using Fieldsets</h4>
<p>
	You can also wrap the form in a <strong>&#39;fieldset&#39;</strong> in place of a <strong>&#39;div&#39;:</strong></p>
<pre class="prettyprint linenums">
&lt;form class=&quot;mws-form&quot;&gt;
    &lt;fieldset class=&quot;mws-form-block&quot;&gt;
        &lt;legend&gt;Form Legend&lt;/legend&gt;
        &lt;div class=&quot;mws-form-row&quot;&gt;
            &lt;label&gt;&lt;/label&gt;
            &lt;div class=&quot;mws-form-item&quot;&gt;
                &lt;textarea&gt;&lt;/textarea&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/fieldset&gt;
    &lt;div class=&quot;mws-button-row&quot;&gt;
    &lt;/div&gt;
&lt;/form&gt;</pre>
<h4>
	Mixing Block and Inline Form</h4>
<p>
	You can have a form with mixed layouts by just giving a form row the class&nbsp;<strong>&#39;mws-form-block&#39;</strong>&nbsp;or&nbsp;<strong>&#39;mws-form-inline&#39;.</strong></p>
<pre class="prettyprint linenums">
&lt;form class=&quot;mws-form&quot;&gt;
    &lt;div class=&quot;mws-form-row mws-form-block&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;mws-form-row mws-form-inline&quot;&gt;&lt;/div&gt;
&lt;/form&gt;</pre>
<h4>
	Form Input Size</h4>
<p>
	Form inputs can have three sizes, small, medium and large. Large is the default size for form inputs.</p>
<p>
	You can control the input size by giving the class attribute <strong>&#39;small&#39;, &#39;medium&#39;, or &#39;large&#39;</strong> to the form item wrapper.</p>
<pre class="prettyprint linenums">
&lt;div class=&quot;mws-form-item large&quot;&gt;
    &lt;input type=&quot;text&quot; /&gt;
&lt;/div&gt;</pre>
<h4>
	Form List</h4>
<p>
	You can create a vertical list of form elements like radio buttons, checkboxes and event text fields using unordered list with the class attribute <strong>&#39;mws-form-list&#39;</strong></p>
<pre class="prettyprint linenums">
&lt;form class=&quot;mws-form&quot;&gt;
    &lt;div class=&quot;mws-form-block&quot;&gt;
        &lt;div class=&quot;mws-form-row&quot;&gt;
            &lt;label&gt;&lt;/label&gt;
            &lt;div class=&quot;mws-form-item&quot;&gt;
                &lt;ul class=&quot;mws-form-list&quot;&gt;
                    &lt;li&gt;&lt;input type=&quot;radio&quot; name=&quot;gender&quot; /&gt; &lt;label&gt;Male&lt;/label&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;input type=&quot;radio&quot; name=&quot;gender&quot; /&gt; &lt;label&gt;Female&lt;/label&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mws-button-row&quot;&gt;
    &lt;/div&gt;
&lt;/form&gt;</pre>
<p>
	An inline, horizontal list can also be created by giving an additional class name, <strong>&#39;inline&#39;</strong> to the unordered list.</p>
<pre class="prettyprint linenums">
&lt;ul class=&quot;mws-form-list inline&quot;&gt;&lt;/ul&gt;
</pre>
<h4>
	Form Input Styling</h4>
<p>
	For textarea, select, radio and checkbox fields, you don&#39;t have to add any class attribute.</p>
<p>
	For text fields, you&#39;ll have to add the css class <strong>&#39;mws-textinput&#39;</strong> to get them styled.</p>
<h4>
	Form Messages</h4>
<p>
	Form messages can be an info message, an error message, a warning message and a success message.</p>
<p>
	<img alt="" src="assets/images/image_5.jpg" style="width: 320px; height: 269px; "></p>
<p>
	The base css class for all messages is <strong>&#39;mws-form-message&#39;</strong>, just add <strong>&#39;error&#39;, &#39;success&#39;, &#39;info&#39;, </strong>or <strong>&#39;warning&#39;</strong> to get different error messages.</p>
<p>
	HTML structure:</p>
<pre class="prettyprint linenums">
&lt;div class=&quot;mws-form-message error&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;mws-form-message success&quot;&gt;&lt;/div&gt;</pre>
<h4>
	Stylesheet Location</h4>
<p>
	The stylesheet of the form and its messages can be found in&nbsp;<strong>css/core/form.css</strong></p>
</section>

<section id="custom_plugins">
	<h3>Custom Plugins</h3><hr class="notop">

    <h4>Pick List</h4>
    <p>Pick list is a plugin for converting usual select inputs to those inputs where you can move items from the left to right column. This plugin was originally a modified version of <a href="http://code.google.com/p/jquery-ui-picklist/">jquery-ui-picklist</a> which was included in my previous Admin Template. This plugin now comes with lots of enhancements, filtering functionality and responsive layout.</p>

    <h5>Usage Example</h5>

    <p>To use the plugin, just include the necessary JavaScript and CSS files, and create your select field. After that initialize the plugin in the document ready event, and you're done.</p>
<pre class="prettyprint linenums theme-balupton">
&lt;link rel=&quot;stylesheet&quot; href=&quot;custom-plugins/picklist/picklist.css&quot; media=&quot;screen&quot;&gt;

&lt;script src=&quot;js/libs/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;custom-plugins/picklist/picklist.min.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;
    $(document).ready(function() {
        $('#pickList').pickList();
    });
&lt;/script&gt;

&lt;select id=&quot;pickList&quot; name=&quot;picklist[]&quot;&gt;
    &lt;option&gt;Apple&lt;/option&gt;
    &lt;option selected=&quot;selected&quot;&gt;Banana&lt;/option&gt;
    &lt;option selected=&quot;selected&quot;&gt;Kiwi&lt;/option&gt;
    &lt;option&gt;Orange&lt;/option&gt;
    &lt;option&gt;Pear&lt;/option&gt;
    &lt;option&gt;Grape&lt;/option&gt;
    &lt;option&gt;Mango&lt;/option&gt;
    &lt;option&gt;Peach&lt;/option&gt;
    &lt;option&gt;Dragon Fruit&lt;/option&gt;
    &lt;option&gt;Durian&lt;/option&gt;
    &lt;option&gt;Avocado&lt;/option&gt;
    &lt;option&gt;Cherry&lt;/option&gt;
&lt;/select&gt;
</pre>

<h5>Plugin Options</h5>
<p>This plugin has too many options to be displayed here, but they are mainly just class names that are used for styling the plugin. It's not recommended to change them unless you know what you do. The options listed below are the ones that you can use to tweak the plugin functionality.</p>
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th class="text-nowrap">Option Name</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>enableCounters</td>
            <td>true</td>
            <td>Whether to show the numbers of visible/invisible options above each filter column.</td>
        </tr>
        <tr>
            <td>enableFilters</td>
            <td>true</td>
            <td>Whether to show and bind the filtering events. If set to false, the filter inputs above each column will be hidden.</td>
        </tr>
        <tr>
            <td>sortList</td>
            <td>true</td>
            <td>Whether to sort the list each time it's refreshed. If not sorted, the options will be ordered in the way you move and create the items before initialization.</td>
        </tr>
    </tbody>
</table>

<h4>Wizard</h4>

<p>This plugin converts a set of form fields into a navigable wizard form with responsive layout. It can work together with jquery validation and form plugin seamlessly. The examples in this template show how this plugin can be implemented to work with those plugins. AJAX submission through this plugin is done via configuring the form plugin with its options which can be found in jQuery Form plugin's official website and documentation <a href="http://malsup.com/jquery/form/" target="_blank">here</a>.</p>

<h5>Usage Example</h5>

<p>To use the plugin, just include the necessary JavaScript and CSS file, create and divide your forms into any elements with the specified wizard element class name that you can specify in this plugin options. After that initialize the plugin in the document ready event, and you're done.</p>
<p><strong>Note:</strong> At the end of the form below, you'll see a div with the class <code>.form-actions .wizard-actions</code>. This div is actually a wrapper for the wizard buttons. It is not required to create this element unless you want to place the button container in another place as the plugin will check whether this element exists, and create one if it doesn't. It is there just for showing an example.</p>
<pre class="prettyprint linenums theme-balupton">
&lt;link rel=&quot;stylesheet&quot; href=&quot;custom-plugins/wizard/wizard.css&quot;&gt;

&lt;script src=&quot;js/libs/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;custom-plugins/wizard/jquery.form.min.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;
    $(document).ready(function() {
        $('#wizard-form').wizard();
    });
&lt;/script&gt;

&lt;form id=&quot;wizard-form&quot; class=&quot;form-horizontal&quot; data-forward-only=&quot;false&quot;&gt;
    &lt;fieldset class=&quot;wizard-step&quot;&gt;
        &lt;legend class=&quot;wizard-label&quot;&gt;&lt;i class=&quot;icon-book&quot;&gt;&lt;/i&gt; Account&lt;/legend&gt;
        &lt;div class=&quot;control-group&quot;&gt;
            &lt;label class=&quot;control-label&quot;&gt;Username &lt;span class=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;div class=&quot;controls&quot;&gt;
                &lt;input type=&quot;text&quot; name=&quot;wizard[username]&quot; class=&quot;span12&quot;&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/fieldset&gt;

    ...

    &lt;fieldset class=&quot;wizard-step&quot;&gt;
        &lt;legend class=&quot;wizard-label&quot;&gt;&lt;i class=&quot;icon-ok&quot;&gt;&lt;/i&gt; Confirmation&lt;/legend&gt;
        &lt;div class=&quot;control-group&quot;&gt;
            &lt;label class=&quot;control-label&quot;&gt;Payment Method &lt;span class=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;div class=&quot;controls&quot;&gt;
                &lt;select name=&quot;wizard[payment]&quot;&gt;
                    &lt;option&gt;PayPal&lt;/option&gt;
                    &lt;option&gt;Visa&lt;/option&gt;
                    &lt;option&gt;Mastercard&lt;/option&gt;
                    &lt;option&gt;Wire Transfer&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/fieldset&gt;
    &lt;div class=&quot;form-actions wizard-actions&quot;&gt;
    &lt;/div&gt;
&lt;/form&gt;
</pre>

<h5>Plugin Options</h5>

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th class="text-nowrap">Option Name</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>element</td>
            <td>'.wizard-step'</td>
            <td>The selector used to find elements inside the form</td>
        </tr>
        <tr>
            <td>navLabelElement</td>
            <td>'.wizard-label'</td>
            <td>The selector used to find elements whose text is used as the navigation label</td>
        </tr>
        <tr>
            <td>buttonContainer</td>
            <td>'.wizard-actions'</td>
            <td>The selector to find the button container. If this selector returns no elements, then a button container will be generated dynamically</td>
        </tr>
        <tr>
            <td>navContainerClass</td>
            <td>'wizard-nav'</td>
            <td>Additional class name to be given to the navigation</td>
        </tr>
        <tr>
            <td>buttonContainerClass</td>
            <td>'form-actions btn-toolbar'</td>
            <td>Additional class name to be given to the button container</td>
        </tr>
        <tr>
            <td>transition</td>
            <td>null</td>
            <td>Transition callback, which will allow you to define a custom transition effect for the wizard steps. Usage of this callback requires you to have an average knowledge of jQuery.</td>
        </tr>
        <tr>
            <td>onStepLeave</td>
            <td>null</td>
            <td>Function to be called before leaving a step, return false to cancel the event. (used to perform form validation in the demo)</td>
        </tr>
        <tr>
            <td>onStepShown</td>
            <td>null</td>
            <td>Function to be called after a new step is shown</td>
        </tr>
        <tr>
            <td>onBeforeSubmit</td>
            <td>null</td>
            <td>Function to be called before submitting the form, return false to cancel form submission</td>
        </tr>
        <tr>
            <td>forwardOnly</td>
            <td>false</td>
            <td>Whether to allow users to navigate back to a previous wizard step</td>
        </tr>
        <tr>
            <td>orientation (horizontal | vertical)</td>
            <td>'horizontal'</td>
            <td>This option will determine the wizard layout</td>
        </tr>
        <tr>
            <td>ajaxSubmit</td>
            <td>true</td>
            <td>This option determines whether the form is going to be submitted via AJAX or a normal HTTP request</td>
        </tr>
        <tr>
            <td>ajaxOptions</td>
            <td>{}</td>
            <td>The options to pass to the jQuery Form plugin when submitting the form via AJAX</td>
        </tr>
        <tr>
            <td>defaultButtonClass</td>
            <td>'btn'</td>
            <td>The default button class name for the wizard buttons</td>
        </tr>
        <tr>
            <td>responsiveNextButtonClass</td>
            <td>'responsive-next-btn'</td>
            <td>The responsive next button class name</td>
        </tr>
        <tr>
            <td>responsivePrevButtonClass</td>
            <td>'responsive-prev-btn'</td>
            <td>The responsive prev button class name</td>
        </tr>
        <tr>
            <td>submitButtonClass</td>
            <td>'btn-primary pull-right'</td>
            <td>The submit button class name</td>
        </tr>
        <tr>
            <td>responsiveNextButtonLabel</td>
            <td>'&lt;i class=&quot;icon-caret-right&quot;&gt;&lt;/i&gt;'</td>
            <td>The text to show inside the responsive next button/td>
        </tr>
        <tr>
            <td>responsivePrevButtonLabel</td>
            <td>'&lt;i class=&quot;icon-caret-left&quot;&gt;&lt;/i&gt;'</td>
            <td>The text to show inside the responsive prev button</td>
        </tr>
        <tr>
            <td>nextButtonLabel</td>
            <td>'Next'</td>
            <td>The text to show inside the next button</td>
        </tr>
        <tr>
            <td>prevButtonLabel</td>
            <td>'Prev'</td>
            <td>The text to show inside the prev button</td>
        </tr>
        <tr>
            <td>submitButtonLabel</td>
            <td>'Submit'</td>
            <td>The text to show inside the submit button</td>
        </tr>
    </tbody>
</table>

<h4>File Input</h4>

<p>Lastly, this is a simple plugin to style file inputs with Bootstrap's uneditable-input and input-append. This plugin is very simple and can be used by just specifying <code>data-provide="fileinput"</code> on a file input field.</p>

<h5>Usage Example</h5>

<p>To use the plugin, just include the JavaScript file, create your file input field and initialize it.</p>
<pre class="prettyprint linenums theme-balupton">
&lt;script src=&quot;js/libs/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;custom-plugins/fileinput.min.js&quot;&gt;&lt;/script&gt;

&lt;input type=&quot;file&quot;&gt;

$(document).ready(function() {
    if( $.fn.fileInput ) {
        $('input[type=&quot;file&quot;]').fileInput();
    }
});
</pre>

<h5>Plugin Options</h5>
<p>This plugin has too many options to be displayed here, but they are mainly just class names that are used for styling the plugin. It's not recommended to change them unless you know what you do. The options listed below are the ones that you can use to tweak the plugin functionality.</p>
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th class="text-nowrap">Option Name</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>placeholder</td>
            <td>'No file selected...'</td>
            <td>The text to show in the undeditable-input field to give users feedback before selecting a file</td>
        </tr>
        <tr>
            <td>buttontext</td>
            <td>'Browse...'</td>
            <td>The text to show in the browse button</td>
        </tr>
    </tbody>
</table>
</section>
<section id="using_plugins">
	<h3>Using Plugins</h3><hr class="notop">
<p>
	There are 15 plugins included in this template:</p>
	<ul>
		<li>Colorpicker</li>
		<li>File Manager (elFinder)</li>
		<li> WYSIWYG  Editor (CLEditor)</li>
		<li>Flot Charts</li>
		<li>Full Calendar</li>
		<li>Growl Notifications</li>
		<li>Image Cropper (imgareaselect)</li>
		<li>File Uploader (plupload)</li>
		<li>Data Tables</li>
		<li>Validation plugin (jQuery validate)</li>
		<li>Select2 plugin</li>
		<li>jQuery prettyPhoto plugin</li>
		<li>jQuery iButton plugin</li>
	</ul>
<p>
	All plugins are styled to work together with this template, so using the provided css files is recommended.</p>
<h4>
	Colorpicker</h4>
<p>
	Colorpicker is jQuery plugin by <a href="http://www.eyecon.ro/colorpicker/">eyecon</a>, it&#39;s a simple component to select color in the same way you select color in Adobe Photoshop.</p>
<p>
	To use colorpicker, you have to attach the necessary javascript and css files</p>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;js/libs/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;plugins/colorpicker/colorpicker.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;plugins/colorpicker/colorpicker.css&quot; /&gt;</pre>
<p>
	There&#39;s already a css class for text input build in this template, you can use it to get a text field with a colorpicker icon on the right side. The css class is <strong>&#39;mws-colorpicker&#39;</strong>.</p>
<pre class="prettyprint linenums">
&lt;input type=&quot;text&quot; class=&quot;mws-colorpicker&quot; /&gt;</pre>
<p>
	For more info about this plugin, please visit&nbsp;<a href="http://www.eyecon.ro/colorpicker/">http://www.eyecon.ro/colorpicker/</a></p>


<h4>
	File Manager (elFinder)</h4>
<p>
	elFinder&nbsp;is an open-source file manager for web, written in JavaScript using jQuery UI. As you can see its creation is inspired by simplicity and convenience of Finder program used in Mac OS X operating system.</p>
<p>
	To use elFinder, you&#39;ll have to attach jQuery-UI, the necessary javascript and css files, and configure it to your liking.</p>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;js/libs/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jui/js/jquery-ui-1.9.0.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;plugins/elfinder/js/elfinder.min.js&quot;&gt;&lt;/script&gt;

&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/jui/jquery.ui.css&quot; media=&quot;screen&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;plugins/elfinder/css/elfinder.css&quot; /&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function() {
        $(&quot;#elfinder&quot;).elfinder({
            url : &#39;plugins/elfinder/connectors/php/connector.php&#39;,&nbsp;
            lang : &#39;en&#39;,
            docked : true,
            height: 300
        });
    });
&lt;/script&gt;

&lt;div id=&quot;elfinder&quot;&gt;&lt;/div&gt;</pre>
<p>
	elFinder also requires a connector to communicate with the server. There are two connectors included in elFinder, one for <strong>PHP </strong>and one for <strong>python</strong>. This connector is configured via the &quot;url&quot; option of the plugin (see above).</p>
<p>
	For more info about this plugin, please visit&nbsp;<a href="http://elrte.org/elfinder">http://elrte.org/elfinder</a></p>


<h4>
	WYSIWYG (CLEditor)</h4>
    <p>CLEditor is a very simple, lightweight WYSIWYG editor that compared to other big, complex editors, is very easy to implement and use. This was the reason I choose this plugin as the WYSIWYG editor instead of other editors.</p>
    <p>On the home page of CLEditor, it is stated that CLEditor is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site.</p>

    <h5>Usage Example</h5>
<pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/cleditor/jquery.cleditor.css&quot; media=&quot;screen&quot;&gt;

&lt;script src=&quot;js/libs/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;plugins/cleditor/jquery.cleditor.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    $(document).ready(function() {
        if( $.fn.cleditor ) {
            $('#cleditor').cleditor({
                // CLEditor options
            });
        }
    });
&lt;/script&gt;

&lt;textarea id=&quot;cleditor&quot;&gt;&lt;/textarea&gt;
</pre>

<p>Home Page: <a href="http://premiumsoftware.net/cleditor/" target="_blank">http://premiumsoftware.net/cleditor/</a></p>
<p>Documentation: <a href="http://premiumsoftware.net/cleditor/docs/GettingStarted.html" target="_blank">http://premiumsoftware.net/cleditor/docs/GettingStarted.html</a></p>


<h4>
	Flot Charts</h4>
    <p>Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.<br>
        Flot works with Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+</p>
    <p>Below is just a very simple example, you can actually create almost everything you need by using the provided plugins, or you can even create your own.</p>
    <p>Generally, all browsers that support the HTML5 canvas tag are supported. For support for Internet Explorer < 9, you can use Excanvas, a canvas emulator. This canvas emulator is included on your page between IE conditional comments like on the example below.</p>

    <h5>Usage Example</h5>
<pre class="prettyprint linenums">
&lt;script src=&quot;js/libs/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;
&lt;!--[if lt IE 9]&gt;
&lt;script src=&quot;js/libs/excanvas.min.js&quot;&gt;&lt;/script&gt;
&lt;![endif]--&gt;
&lt;script src=&quot;plugins/flot/jquery.flot.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;
    $(document).ready(function() {
        var options = {
            series: {
                lines: { show: true },
                points: { show: true }
            }
        };

        // Generate your data here

        $.plot($( '#placeholder' ), data, options);
    });
&lt;/script&gt;

&lt;div id=&quot;placeholder&quot; style=&quot;height: 300px;&quot;&gt;&lt;/div&gt;
</pre>

<p>Home Page: <a href="http://flotcharts.org/" target="_blank">http://flotcharts.org/</a></p>
<p>Documentation: <a href="https://github.com/flot/flot/blob/master/API.md" target="_blank">https://github.com/flot/flot/blob/master/API.md</a></p>


<h4>Full Calendar</h4>
<p>FullCalendar is a jQuery plugin that provides a full-sized, drag &amp; drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format. It is visually customizable and exposes hooks for user-triggered events.</p>
<p>FullCalendar is great for displaying events, but it isn't a complete solution for event content-management. Beyond dragging an event to a different time/day, you cannot change an event's name or other associated data. It is up to you to add this functionality through FullCalendar's event hooks.</p>
<p>This plugin has its own container when put in a widget in this template; just put the calendar inside a div with the class <code>.calendar</code> as a widget content.</p>

<h5>Usage Example</h5>
<pre class="prettyprint linenums theme-balupton">
&lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/fullcalendar/fullcalendar.css&quot; media=&quot;screen&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/fullcalendar/fullcalendar.print.css&quot; media=&quot;print&quot;&gt;

&lt;script src=&quot;jui/js/jquery-ui-1.9.0.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;plugins/fullcalendar/fullcalendar.min.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;
    $(document).ready(function() {
        if( $.fn.fullCalendar ) {
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();
            
            $( '#fullcalendar' ).fullCalendar({
                header: {
                    left: 'prev next today',
                    center: 'title',
                    right: 'month agendaWeek agendaDay'
                }, 
                editable: true, 
                events: [
                    {
                        title: 'All Day Event',
                        start: new Date(Date.UTC(y, m, 1))
                    },

                    ...

                    {
                        title: 'Click for Google',
                        start: new Date(Date.UTC(y, m, 28)), 
                        end: new Date(Date.UTC(y, m, 29)), 
                        url: 'http://google.com/'
                    }
                ], 
                
                buttonText: {
                    prev: '&lt;i class=&quot;icon-caret-left&quot;&gt;&lt;/i&gt;', 
                    next: '&lt;i class=&quot;icon-caret-right&quot;&gt;&lt;/i&gt;', 
                    prevYear: '&lt;i class=&quot;icon-caret-left&quot;&gt;&lt;/i&gt;&lt;i class=&quot;icon-caret-left&quot;&gt;&lt;/i&gt;', 
                    nextYear: '&lt;i class=&quot;icon-caret-right&quot;&gt;&lt;/i&gt;&lt;i class=&quot;icon-caret-right&quot;&gt;&lt;/i&gt;'
                }
            });
            
        }
    });
&lt;/script&gt;

&lt;div id=&quot;fullcalendar&quot;&gt;&lt;/div&gt;
</pre>

<p>Home Page: <a href="http://arshaw.com/fullcalendar/" target="_blank">http://arshaw.com/fullcalendar/</a></p>
<p>Documentation: <a href="http://arshaw.com/fullcalendar/docs/" target="_blank">http://arshaw.com/fullcalendar/docs/</a></p>


<h4>
	Growl Notifications (jGrowl)</h4>
<p>
	jGrowl is an unobtrusive notification system for web applications, similar to Growl for Mac OS X. The idea is simple, deliver notifications to the end user in a noticeable way that doesn&#39;t obstruct the work flow and yet keeps the user informed.</p>
<p>
	To use jGrowl, you need to attach the necessary javascript and css files:</p>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;js/libs/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;plugins/jgrowl/jquery.jgrowl.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;plugins/jgrowl/jquery.jgrowl.css&quot; media=&quot;screen&quot; /&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
     $.jGrowl(&quot;Hello World!&quot;, {position: &quot;bottom-right&quot;});
&lt;/script&gt;</pre>
<p>
	For more info about this plugin, please visit&nbsp;<a href="https://bitbucket.org/stanlemon/jgrowl">https://bitbucket.org/stanlemon/jgrowl</a></p>


<h4>
	Image Cropper (imgareaselect)</h4>
<p>
	imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).</p>
<p>
	To use&nbsp;imgAreaSelect, you need to attach the necessary javascript and css files:</p>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;js/libs/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;plugins/imgareaselect/jquery.imgareaselect.min.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;plugins/imgareaselect/css/imgareaselect-default.css&quot; media=&quot;screen&quot; /&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function () {
    $(&#39;img#photo&#39;).imgAreaSelect({
        handles: true,
        onSelectEnd: someFunction
    });
});

&lt;/script&gt;</pre>
<p>
	For more info about this plugin, please visit&nbsp;<a href="http://odyniec.net/projects/imgareaselect/">http://odyniec.net/projects/imgareaselect/</a></p>
<p>
	There&#39;s also a tutorial for submitting the image coordinates to the server, you can find it here:</p>
<p>
	<a href="http://odyniec.net/projects/imgareaselect/examples-callback.html#submitting-selection-coordinates">http://odyniec.net/projects/imgareaselect/examples-callback.html#submitting-selection-coordinates</a></p>


<h4>
	File Uploader (plupload)</h4>
<p>
	The developers of TinyMCE brings you Plupload, a highly usable upload handler for your Content Management Systems or similar. Plupload is currently separated into a Core API and a jQuery upload queue widget this enables you to either use it out of the box or write your own custom implementation.</p>
<p>
	To use plupload, you need to attach the necessary javascript and css files, configure your backend and initialize the plugin.</p>
<div>
	<div>
		<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;js/libs/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot; src=&quot;plugins/plupload/plupload.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;plugins/plupload/plupload.flash.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;plugins/plupload/plupload.html4.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;plugins/plupload/plupload.html5.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;plugins/plupload/jquery.plupload.queue/jquery.plupload.queue.js&quot;&gt;&lt;/script&gt;

&lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/plupload/jquery.plupload.queue.css&quot; /&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function() {
        $(&quot;#uploader&quot;).pluploadQueue({
            // General settings
            runtimes : &#39;html4, html5&#39;,&nbsp;
            url : &#39;../upload.php&#39;,
            max_file_size : &#39;1000mb&#39;,
            max_file_count: 20, // user can add no more then 20 files at a time
            chunk_size : &#39;1mb&#39;,
            unique_names : true,
            multiple_queues : true,
            // Resize images on clientside if we can
            resize : {width : 320, height : 240, quality : 90},
            // Rename files by clicking on their titles
            rename: true,
            // Sort files
            sortable: true,
            // Specify what files to browse for
            filters : [
                {title : &quot;Image files&quot;, extensions : &quot;jpg,gif,png&quot;},
                {title : &quot;Zip files&quot;, extensions : &quot;zip,avi&quot;}
            ]
        });
    });
&lt;/script&gt;
&lt;div id=&quot;uploader&quot;&gt;
    &lt;p&gt;You browser doesn&#39;t have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.&lt;/p&gt;
&lt;/div&gt;</pre>
	</div>
</div>
<p>
	For more info about this plugin, please visit&nbsp;<a href="http://www.plupload.com/">http://www.plupload.com/</a></p>


<h4>
	Data Tables</h4>
<p>
	DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.</p>
<p>
	To use datatables, you need to attach the necessary javascript file:</p>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;js/libs/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;plugins/datatables/jquery.dataTables.js&quot;&gt;&lt;/script&gt;</pre>
<p>
	because data table styles is integrated with the core styles, you don&#39;t need to add any additional stylesheets.</p>
<p>
	For more info about data table, please visit&nbsp;<a href="http://datatables.net/">http://datatables.net/</a></p>


<h4>
	Validation Plugin</h4>
<p>
	Form validation on this template is based on the jquery validate plugin, one of the most popular jquery validation plugin available.</p>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;js/libs/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;plugins/validate/jquery.validate.js&quot;&gt;&lt;/script&gt;</pre>
<p>
	To use the validation plugin, just add the javascript file, and define the correct class names to your form elements.</p>
<p>
	For more info about this plugin, please visit&nbsp;<a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">http://bassistance.de/jquery-plugins/jquery-plugin-validation/</a></p>

<h4>Select2</h4>

<p>Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Look and feel of Select2 is based on the excellent Chosen library.</p>

<h5>Usage Example</h5>
<pre class="prettyprint linenums theme-balupton">
&lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/select2/select2.css&quot; media=&quot;screen&quot;&gt;

&lt;script src=&quot;js/libs/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;plugins/select2/select2.min.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;
    $(document).ready(function() {
        if( $.fn.select2 ) {
            $('#e1').select2();
        }
    });
&lt;/script&gt;

&lt;select id=&quot;e1&quot;&gt;
    &lt;option value=&quot;AL&quot;&gt;Alabama&lt;/option&gt;
    ...
    &lt;option value=&quot;WY&quot;&gt;Wyoming&lt;/option&gt;
&lt;/select&gt;
</pre>
<p>Home Page: <a href="http://ivaynberg.github.com/select2/" target="_blank">http://ivaynberg.github.com/select2/</a></p>
<p>Documentation: <a href="http://ivaynberg.github.com/select2/" target="_blank">http://ivaynberg.github.com/select2/</a></p>

<h4>
	Pretty Photo Plugin</h4>
<p>
	<strong>prettyPhoto </strong>is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It&rsquo;s a full blown media lightbox. It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6.</p>
<p>
	To use this plugin you need to add the necessary javascript and css files:</p>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;js/libs/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;plugins/prettyphoto/js/jquery.prettyPhoto-min.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;plugins/prettyphoto/css/prettyPhoto.css&quot; /&gt;

$(document).ready(function(){
    $(&quot;a[rel^=&#39;prettyPhoto&#39;]&quot;).prettyPhoto();
});

&lt;a href=&quot;sample.jpg&quot; rel=&quot;prettyPhoto&quot;&gt;&lt;img src=&quot;sample.jpg alt=&quot;Sample&quot; /&gt;&lt;/a&gt;</pre>
<p>
	For more info about this plugin, please visit&nbsp;<a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/">http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/</a></p>

<h4>iButton</h4>
<p>The iButton jQuery plug-in emulates the checkbox functionality found on the iPhone. This plug-in was inspired by several other plugins such as Thomas Reynolds' iPhone style checkboxes. However, this plugin attempt to combine the best features of all of the various iPhone checkbox style plugins and then add the functionality that we felt was still missing.</p>
<p><strong>Note:</strong> The plugin shipped within this template is a modified version of the original plugin, so it may work without any images, and is styled using pure CSS3. Additionally this plugin now supports HTML5 data-attributes, so you can create an iButton by just specifying <code>data-provide="ibutton"</code>. This also provides you the ability to use those data-attributes to set the plugin options. The example code below only includes the required scripts and HTML markup and shows how those data-attributes functionality can help you create iButtons without writing any JavaScript code.</p>

<h5>Usage Example</h5>
<pre class="prettyprint linenums theme-balupton">
&lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/ibutton/jquery.ibutton.css&quot; media=&quot;screen&quot;&gt;

&lt;script src=&quot;js/libs/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;plugins/ibutton/jquery.ibutton.min.js&quot;&gt;&lt;/script&gt;

&lt;input type=&quot;checkbox&quot; class=&quot;ibutton&quot;&gt;

&lt;script&gt;
    $(document).ready(function() {
        if( $.fn.iButton ) {
            $('.ibutton').iButton();
        }
    });
&lt;/script&gt;
</pre>

<p>Home Page: <a href="http://www.givainc.com/labs/ibutton_jquery_plugin.htm" target="_blank">http://www.givainc.com/labs/ibutton_jquery_plugin.htm</a></p>
<p>Documentation: <a href="http://www.givainc.com/labs/ibutton_jquery_plugin.htm" target="_blank">http://www.givainc.com/labs/ibutton_jquery_plugin.htm</a></p>

</section>
<section id="changelog">
	<h3>Changelog</h3><hr class="notop">
<h4>
	Version 2.1 (12/08/2012)</h4>
<ul>
	<li>Update Timepicker to v1.1.1</li>
	<li>Update jQuery to 1.8.3</li>
	<li>Update jQuery-UI to 1.9.2</li>
	<li>Columned Form Cleanup, this now follows Bootstrap Fluid Grid System</li>
	<li>Normalize all Form inputs height to 30px</li>
	<li>Cleaned up HTML markup</li>
	<li>Clean up all css with cssbeautify</li>
	<li>Added mws-form-row.bordered</li>
	<li>Added autosize plugin</li>
	<li>Restyled fieldset and legends</li>
	<li>Fixed a couple of bugs</li>
</ul>
<h4>Version 2.0.1 (10/18/2012)</h4>
<ul>
	<li>IE bugs fixed</li>
	<li>File input plugin bug fixed</li>
	<li>Minor layout bug fixes</li>
	<li>Fixed bugs in demo script</li>
	<li>Update imgAreaSelect to 0.9.9</li>
</ul>

<h4>Version 2.0 (10/16/2012)</h4>
<ul>
	<li>Bootstrap Integration
		<ul>
			<li>Scaffolding
				<ul>
				<li>Normalize and reset</li>
				<li>Body type and links</li>
				</ul>
			</li>
			<li>Base CSS
				<ul>
					<li>Headings body</li>
					<li>code and pre</li>
					<li>labels badges</li>
					<li>Buttons</li>
				</ul>
			</li>
			<li>Components
				<ul>
					<li>Button groups and dropdowns</li>
					<li>Breadcrumbs</li>
					<li>thumbnails</li>
				</ul>
			</li>
			<li>Miscellaneous
				<ul>
					<li>Utilities</li>
				</ul>
			</li>
			<li>JS Components
				<ul>
					<li>Tooltips</li>
					<li>Popovers</li>
					<li>Dropdowns</li>
					<li>Collapse</li>
				</ul>
			</li>
			<li>Plugins
				<ul>
					<li>Dropdowns</li>
					<li>Tooltips</li>
					<li>Popovers</li>
					<li>Collapse</li>
				</ul>
			</li>
			<li>@baseFontSize: 13px</li>
			<li>@baseLineHeight: 19px</li>
		</ul>
	</li>
	<li>Updgrade
		<ul>
			<li>Upgrade jQuery to 1.8.2</li>
			<li>Upgrade to the brand new jQuery-UI 1.9.0</li>
			<li>Updated all plugins to their latest versions</li>
		</ul>
	</li>
	<li>Replacement
		<ul>
			<li>Replaced mwsWizard with a new custom Wizard Plugin</li>
			<li>Replaced elRTE with CLEditor</li>
			<li>Replaced Sourcerer plugin with Google Prettify</li>
			<li>Replaced customFileInput with custom file input plugin</li>
			<li>Replaced jQuery tipsy with Bootstrap Tooltip</li>
			<li>Replaced jQuery Chosen with jQuery Select2</li>
			<li>Replaced placeholder plugin with a better one</li>
			<li>Replaced spinner plugin with jQuery-UI 1.9.0 Spinner</li>
			<li>Replaced .mws-button with Bootstrap .btn</li>
		</ul>
	</li>
	<li>Addition
		<ul>
			<li>Added wizard example page</li>
			<li>Added PickList plugin</li>
			<li>Added new wizard plugin</li>
			<li>Added iButton jQuery plugin</li>
			<li>Added lots of new background images for MWS Themer</li>
			<li>Added jQuery-UI extension script for Slider and Progressbar</li>
			<li>Added placeholder text for search form on sidebar</li>
		</ul>
	</li>
	<li>Rewrite (breaks compatibility)
		<ul>
			<li>Input labels inside .mws-form now must have .mws-form-label class</li>
			<li>Changed mws-toolbar's buttons to Bootstrap btn-toolbar</li>
			<li>Renamed the statistic widget class names from mws-report to mws-stat</li>
			<li>Changed but kept the compatibility for collapsible panels, these panels now utilizes Bootstrap collapse plugin</li>
			<li>Replaced all IconSweets 24x24 image icons with IcoMoon Web Font Icon</li>
			<li>Converted Led Icons to sprite image</li>
			<li>Changed Fatcow Icons class name to icol32-</li>
			<li>Replaced the CSS reset and typography stylesheets with Bootstrap</li>
		</ul>
	</li>
	<li>Restructure (breaks compatibility)
		<ul>
			<li>JavaScript files structure reorganized</li>
			<li>CSS files structure reorganized</li>
		</ul>
	</li>
	<li>Optimization (breaks compatibility)
		<ul>
			<li>Major base CSS rewrite, optimization and improvement according to last standards</li>
			<li>Replaced image usages for transparent and gradient with CSS3, and moved those image usages to IE < 9 stylesheet</li>
			<li>All HTML files now only contains reference to the plugins used on that page</li>
			<li>Tons of redundant code and bug fixes</li>
		</ul>
	</li>
</ul>
<h4>
	Version 1.6 (5/22/2012)</h4>
<ul>
	<li>
		Added styles for jQuery-ui buttonset</li>
	<li>
		Updated jQuery-UI to 1.8.20</li>
	<li>
		Fixed the spinner examples</li>
	<li>
		Fixed datepickers that appears behind jQuery-UI dialog</li>
	<li>
		Added datepicker on dialog modal form example</li>
	<li>
		Added a custom wizard plugin, <strong>mwsWizard</strong></li>
	<li>
		Renamed wizard navigation class name to .mws-wizard-nav</li>
	<li>
		Removed smart wizard plugin</li>
</ul>
<h4>
	Version 1.5 (4/29/2012)</h4>
<ul>
	<li>
		Updated jQuery to 1.7.2</li>
	<li>
		DataTables plugin updated v1.9.1</li>
	<li>
		Table stylesheet updated to support DataTables 1.9.1</li>
	<li>
		Chosen updated to 0.9.8</li>
	<li>
		Fullcalendar updated to 1.5.3</li>
	<li>
		PLupload updated to 1.5.4</li>
	<li>
		prettyPhoto updated to 3.1.4</li>
	<li>
		jquery-ui timepicker addon updated to 1.0</li>
	<li>
		Moved the fileinput styling script as core script</li>
	<li>
		Renamed the file &quot;/css/core/report.css&quot; to &quot;/css/core/statistic.css&quot;</li>
	<li>
		Added table of contents on all css files</li>
	<li>
		Separated the jquery-ui folder</li>
	<li>
		Moved the jquery-ui timepicker addon into the jquery-ui folder</li>
	<li>
		Replaced placeholder plugin with a better one</li>
	<li>
		Fixed columned form error message</li>
	<li>
		Improved the responsive layout on mobile</li>
</ul>
<h4>
	Version 1.4 (3/24/2012)</h4>
<ul>
	<li>
		Wizard styling bug fixed</li>
	<li>
		Fixed dropdown messages that are not clickable</li>
	<li>
		Fixed background image bug</li>
	<li>
		Added smart wizard plugin</li>
	<li>
		Integrated the build in wizard style with smart wizard</li>
</ul>
<h4>
	Version 1.3 (2/19/2012)</h4>
<ul>
	<li>
		Fixed Login page not working on IE</li>
	<li>
		Form in jQuery-UI dialogs</li>
	<li>
		Fixed navigation disappear if searchbox removed on mobile devices</li>
	<li>
		File input error message now displays correctly</li>
	<li>
		Spinner error message now displays correctly</li>
	<li>
		Datepicker should not bring up virtual keyboard</li>
	<li>
		Themer can now change background image</li>
	<li>
		Images optimized
		<ul>
			<li>
				core [435,250 bytes --&gt; 115,214 bytes]</li>
			<li>
				jui [72,348 bytes --&gt; 8,084 bytes]</li>
			<li>
				519 icons 16x16 [284,317 bytes --&gt; 233,544 bytes]</li>
			<li>
				461 icons 24x24 [227,177 bytes --&gt; 183,807 bytes]</li>
			<li>
				1400 icons 32x32 [2,264,409 bytes --&gt; 2,093,238 bytes]</li>
		</ul>
	</li>
</ul>
<h4>
	Version 1.2 (2/10/2012)</h4>
<ul>
	<li>
		Responsive Layout, this template now looks great on desktops, tablets and mobile phones</li>
	<li>
		Added column layout for forms</li>
	<li>
		Color change on hovered table rows</li>
	<li>
		Improved the login page, added validation and shake effect</li>
	<li>
		Added new form error style for radio and checkbox input</li>
	<li>
		Added jQuery-UI timepicker, an extension of the datepicker</li>
	<li>
		Panels can now be collapsed by default</li>
	<li>
		Changed the file styling plugin to jquery.fileinput</li>
	<li>
		jQuery-UI now support touch devices</li>
	<li>
		Enlarged the jQuery-UI slider handle so it will be easier to use on touch devices</li>
	<li>
		Bug and layout fixes</li>
</ul>
<h4>
	Version 1.1 (2/5/2012)</h4>
<ul>
	<li>
		Added select inputs with Chosen Plugin</li>
	<li>
		Added prettyPhoto Plugin</li>
	<li>
		Added functionality to dismiss form messages</li>
	<li>
		Improved the color chooser</li>
	<li>
		Improved the login page</li>
</ul>
<p>&nbsp;
	</p>
</section>
<section id="credits">
	<h3>Credits</h3><hr class="notop">

    <h5>Icons</h5>
    <ul>
        <li>IcoMoon Web Font Icons
            <br><a href="http://icomoon.io" target="_blank">http://icomoon.io</a>
        </li>
        <li>
            Led Icon Set
            <br><a href="http://led24.de/iconset/" target="_blank">http://led24.de/iconset/</a>
        </li>
        <li>
            Fatcow
            <br><a href="http://www.fatcow.com/free-icons" target="_blank">http://www.fatcow.com/free-icons</a>
        </li>
    </ul>

	<h4>Images</h4>
	<p>Envato&#39;s Asset Library -&nbsp;<a href="http://themeforest.net/page/asset_library">http://themeforest.net/page/asset_library</a></p>

    <h5>JavaScript Plugins</h5>
    <ul>
		<li>Colorpicker
			<br><a href="http://www.eyecon.ro/colorpicker/">http://www.eyecon.ro/colorpicker/</a>
		</li>
        <li>elFinder
            <br><a href="http://elfinder.org/" target="_blank">http://elfinder.org/</a>
        </li>
        <li>CLEditor
            <br><a href="http://premiumsoftware.net/cleditor/" target="_blank">http://premiumsoftware.net/cleditor/</a>
        </li>
        <li>Flot
            <br><a href="http://flotcharts.org/" target="_blank">http://flotcharts.org/</a>
        </li>
        <li>FullCalendar
            <br><a href="http://arshaw.com/fullcalendar/" target="_blank">http://arshaw.com/fullcalendar/</a>
        </li>
        <li>
        	Growl Notifications
        	<br><a href="https://bitbucket.org/stanlemon/jgrowl">https://bitbucket.org/stanlemon/jgrowl</a>
        </li>
        <li>File Uploader
        	<br><a href="http://www.plupload.com/">http://www.plupload.com/</a>
        </li>
        <li>
        	Image Cropper (imgareaselect)
        	<br><a href="http://odyniec.net/projects/imgareaselect/">http://odyniec.net/projects/imgareaselect/</a>
        </li>
        <li>DataTables
            <br><a href="http://datatables.net/" target="_blank">http://datatables.net/</a>
        </li>
        <li>jQuery Validate Plugin
            <br><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank">http://bassistance.de/jquery-plugins/jquery-plugin-validation/</a>
        </li>
        <li>iButton
            <br><a href="http://www.givainc.com/labs/ibutton_jquery_plugin.htm" target="_blank">http://www.givainc.com/labs/ibutton_jquery_plugin.htm</a>
        </li>
		<li>
			jQuery Pretty Photo Plugin
			<br><a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/">http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/</a>
		</li>
        <li>Select2
            <br><a href="http://ivaynberg.github.com/select2/" target="_blank">http://ivaynberg.github.com/select2/</a>
        </li>
        <li>Google Prettify
            <br><a href="https://code.google.com/p/google-code-prettify/" target="_blank">https://code.google.com/p/google-code-prettify/</a>
        </li>
    </ul>
</section>

	</div>
</body>
</html>